<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red
    }
    .blue {
      color: blue
    }
    .px40 {
      font-size: 40px;
    }
    .px80 {
      font-size: 80px;
    }
    .underline {
      text-decoration: underline;
    }
    .boder {
      border: 1px solid pink;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="text" v-model="val1" v-on:blur="fn1">
    <button @click="fn2(123,$event)">确认</button>
    <p>{{val1}}</p>
    <hr>
    <p>自己实现一个v-model</p>
    <!-- v-bind:value="val2"绑定输入框的value属性，使他成为变量 -->
    <!-- v-on:input="chagneVal"监听事件，当输入框值发生变化时，触发对应的函数，更新数据 -->
    <input type="text" v-bind:value="val2" v-on:input="chagneVal">
    <p>{{val2}}</p>
    <hr>
    <p :class="className">普通的变量替换</p>
    <p :class="'px'+size">js的字符串拼接</p>
    <p :class="[isTrue? 'underline' : '']">js的三元表达式</p>
    <p :class="{'underline':isTrue}">json类型</p>
    <p :class="['boder', className, isTrue? 'underline' : '']">数组的形式</p>
    <hr>
    <p :style="{'color': color1}">绑定style，普通的变量替换</p>
    <p :style="style1">绑定style，json类型的</p>
    <p :style="{fontSize:size+'px'}">绑定style,字符串拼接类型</p>
    <p :style="[style1,style2]">绑定style,数组类型</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        val1: '',
        // val2是自己实现的v-model的那个输入框的值
        val2: '',
        className: 'red',
        size: 80,
        isTrue: true,
        color1: 'red',
        style1: {color: 'blue'},
        style2: {border: '1px solid red'},
      },
      methods: {
        fn1(e) {
          // e.target是事件作用的元素
          console.log(e.target.value);
        },
        fn2(num,e) {
          // this就是当前的vue实例
          console.log(this);
          // e是事件对象
          console.log(num,e);
        },
        chagneVal(e) {
          console.log(e.target.value);
          // 获取输入框的值，并赋值给data中的数据
          this.val2 = e.target.value
        }
      },
    });
  </script>
</body>
</html>